<template>
  <view class="padding-sm">
    <view class="app-header">
      <view class="cu-bar bg-white">
        <view class="action border-title">
          <text class="text-xl text-bold">我的用药建议</text>
          <text class="bg-gradual-blue" style="width:3rem"></text>
        </view>
      </view>
      <!-- 索引条 -->
      <ill-sub @clickSub="changeSub" ref="mySub"></ill-sub>
    </view>
    <view v-if="!adviceList || adviceList.length === 0">
      <empty-page container-height="100px" text="暂无用药建议" />
    </view>
    <view class="app-body" v-for="(item, index) in adviceList" :key="item.id" v-else>
      <view class="medical-item bg-white padding flex ">
        <view class="item-img-container">
          <image class="item-img" :src="itemUrl"></image>
        </view>

        <view class="item-text text-grey">

          <view class="text-container">
            <view class="title">建议医生：</view>
            <view class="content">{{item.doctorName}}</view>
          </view>

          <view class="text-container">
            <view class="title">药品名称：</view>
            <view v-if="item.drugName" class='content cu-tag light bg-blue' :key="index"
              v-for="(drugTag, index) in item.drugName.split(',')">
              {{drugTag}}
            </view>
            <view v-else class="content">暂无</view>
          </view>

          <view class="text-container">
            <view class="title">每日次数：</view>
            <view class="content">{{item.medFrequency ? item.medFrequency + '次' : "暂无"}}</view>
          </view>

          <view class="text-container">
            <view class="title">用药说明：</view>
            <view class="content">{{item.medComment}}</view>
          </view>

          <view class="text-container">
            <view class="title">服用时间：</view>
            <view v-if="item.medTime" class='content cu-tag light bg-cyan' :key="index"
              v-for="(timeTag, index) in item.medTime.split(',')">
              {{timeTag}}
            </view>
            <view v-else class="content">暂无</view>
          </view>
        </view>
      </view>
      <view class="cu-chat">
        <view class="cu-info round">发布时间：{{item.createTime}}</view>
      </view>
    </view>

    <view style="height: 20px;"></view>

  </view>
</template>

<script>
  export default {

    beforeDestroy() {
      this.adviceList = [];
    },
    onLoad() {
      // 初始化图片
      if (this.$staticUrl) {
        this.itemUrl = this.$staticUrl + 'page-icon-medical.png';
      } else {
        console.error('staticUrl 未定义');
      }
    },
    methods: {
      // 跳转到顶部
      scrollToTop() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 0, // 设置一个很大的值，确保滚动到底部
            duration: 100, // 滚动动画的时长
          });
        })
      },
      // 跳转到底部
      scrollToBottom() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 9999, // 设置一个很大的值，确保滚动到底部
            duration: 300, // 滚动动画的时长
          });
        })
      },
      // 下拉重载方法
      onPullDownRefresh() {
        // 重新加载数据
        this.resetData();
        this.loadMoreData();
      },
      // 滚动到底部
      onReachBottom() {
        // 当滚动到底部时触发上拉加载更多
        this.loadMoreData();
      },
      // 加载更多数据
      loadMoreData() {
        // 如果已经没有更多数据或正在加载中，则不再进行加载
        if (this.paramObj.pageNum !== 1 && this.adviceList.length >= this.total) {
          uni.$showMsg('数据已加载完毕!');
          return;
        } else if (this.isLoading) {
          uni.$showMsg('正在玩命加载中!');
          return;
        }
        this.fetchData();
      },
      // 重新赋值
      resetData() {
        this.adviceList = [];
        this.total = 0;
        this.paramObj.pageNum = 1;
      },
      changeSub(subId) {
        this.paramObj.subId = subId;
        this.resetData();
        this.fetchData();
        this.scrollToTop();
      },
      async fetchData() {
        if (!this.paramObj.subId) {
          return;
        }
        this.isLoading = true;
        const {
          data: res
        } = await uni.$http.get('/medAdvice/list', this.paramObj)
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        if (this.paramObj.pageNum === 1) {
          // 下拉重载，清空原有数据
          this.adviceList = res.rows;
          console.log(this.adviceList);
        } else {
          // 上拉加载，追加数据
          this.adviceList = [...this.adviceList, ...res.rows];
          this.scrollToBottom();
        }
        this.total = res.total;
        this.paramObj.pageNum++;
        this.isLoading = false; // 标记为加载完成
      }
    },
    data() {
      return {
        isLoading: false,
        total: 0,
        paramObj: {
          pageNum: 1,
          pageSize: 10,
          subId: undefined
        },
        adviceList: [],
        itemUrl: ''
      };
    }
  }
</script>

<style lang="scss">
  .app-header {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 110px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .app-body {
    position: relative;

    .medical-item {
      /* 其他样式 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      width: 100%;
      height: 150px;

      .item-img-container {
        display: flex;
        align-items: center;

        /* 图片垂直居中对齐 */
        .item-img {
          width: 75px;
          height: 75px;
        }
      }

      .item-text {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        justify-content: center;

        /* 文本垂直居中对齐 */
        .text-container {
          display: flex;
          align-items: center;
          overflow-x: auto;

          .title {
            font-size: 13px;
            color: #333;
            flex-shrink: 0;
          }

          .content {
            font-size: 13px;
            white-space: nowrap;
            /* 不换行 */
            padding-right: 10px;
          }
        }

      }
    }
  }
</style>